// 进入动画执行前 钩子函数
export const beforeEnter = (el) => {
  handleAnimate(el);
};
export const beforeEnterReset = (el) => {
  handleAnimate(el, 'enter'); // 带第二个形参
};

// 离开动画执行前 钩子函数
export const beforeLeave = (el, type) => {
  handleAnimate(el);
};
export const beforeLeaveReset = (el) => {
  handleAnimate(el, 'leave'); // 带第二个形参
};

/**
 * 处理动画
 */
function handleAnimate(el, type) {
  // 获取当前元素对应属性
  const { name, duration, delay } = getElementAttribute(el, type);

  // 加工css
  var cssObj = {
    'animation-delay': delay,
    '-webkit-animation-delay': delay,
    'animation-duration': duration || '0.5s', // 默认0.5s
    '-webkit-animation-duration': duration || '0.5s',
    visibility: 'visible'
  };

  // 判断是否需要修改 动画
  if (name) {
    cssObj['-webkit-animation-name'] = name;
    cssObj['animation-name'] = name;
  }

  // 设置css
  el.style.cssText = getCssText(cssObj);
}

/**
 * 获取元素属性
 */
function getElementAttribute(el, type) {
  const name = el.getAttribute(type ? `${type}-animate-name` : 'animate-name');
  const delay = el.getAttribute(type ? `${type}-animate-delay` : 'animate-delay');
  const duration = el.getAttribute(type ? `${type}-animate-duration` : 'animate-duration');

  return {
    name,
    delay,
    duration
  };
}

/**
 * 拼接css
 */
function getCssText(obj) {
  var text = [];
  for (var o in obj) {
    text.push(o + ':' + obj[o]);
  }
  return text.join(';');
}
